<template>
  <div>
    <div id="page-inner">
        <div id="offices">
            <template  v-for="item in datas" :key="item.oid">
                    <div class="office-item">
                        <div class="office-name">
                            <h3>{{item.officename}}</h3>
                        </div>
                        <div>
                            <p>{{item.doctornum}}位医生</p>
                            <p  class="office-click" @click = "handleClick(item.officename)">详细信息</p>
                        </div>
                    </div>
            </template>
        </div>
</div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getOffice } from '@/api/office'
const datas = ref([])
const initDatas = async() => {
    const res = await getOffice()
    console.log(res)
    datas.value = res.data.datas
}

initDatas()

const router = useRouter()

const handleClick = (officename) => {
    router.push({
        path: '/user/yuyue1-1',
        query: {
            officename
        }
    })
}
// const initGetUsers = async() => {
//   const res = await getOffice()
//   data.value = res.data.datas
// }
// initGetUsers()

// const jpm = (index) => {
//     $("#start").val(index);

//     $("#doctor").submit();

// }
// const jumpInput = () => {

//     var index=$("#index").val();
//     var match = /^[1-9][0-9]*[0-9]*$/;
//     if(match.test(index)){
//         jump(index);
//     }else {
//         alert("请输入数字！")
//     }
// }
</script>

<style>
.search{
                    height:150px;
                    border-bottom: 2px #2e2e2e solid;
                }
                .search input{
                    height: 40px;
                    width: 200px;
                    color: #2e2e2e;
                    padding: 0 20px;
                    border-radius: 4px;
                }
                .search button{
                    height: 40px;
                    color: #2e2e2e;
                    padding: 0 20px;
                    border-radius: 2px;
                    cursor: pointer;
                }
                .search button:hover{
                    color: #0065AF;
                }

#offices:after{
                    content: "";
                    clear: both;
                    display: block;
                }
            .office-item{
                width: 230px;
                height: 180px;
                float: left;
                text-align: center;
                border: 1px solid #dddddd;
                margin: 30px ;
            }
            .office-item .office-name{
                margin: 30px auto;
                color: #000;
            }
            .office-item p{
                margin: 30px auto;
                color: #2b66a5;
            }
            .office-item .office-click{
                color: #de615e;
                font-size: 15px;
                cursor: pointer;
            }

#pagination{
                width: 90%;
                text-align: center;
            }
            .pagination {
                display: inline-block;
                padding-left: 0;
                margin: 21px 0;
                border-radius: 4px;
            }.pagination li{
                 display: inline;
             }

            .pagination a{
                border-radius: 6px;
                color: #eb6864;
                cursor: pointer;
                padding: 14px 16px;
                font-size: 19px;
                line-height: 1.3333333;
                border: 1px solid #dddddd;
                margin-left: -1px;
            }
            .pagination a:hover{
                background-color: #eeeeee;
            }
            .pagination input{
                border: 1px solid #dddddd;
                width: 60px;
                padding: 8px 12px;
                font-size: 15px;
                line-height: 1.5;
                color: #777777;
            }
            .pagination .disabled{
                cursor: not-allowed;
            }
</style>
